<template>
  <el-menu class="el-menu-vertical-demo" unique-opened style="width:220px">
    <el-submenu
      v-for="(category, tIndex) in componentData"
      :key="tIndex"
      style="width:220px;align:center"
      :index="tIndex+''"
    >
      <template slot="title">{{ category.name }}</template>
      <el-menu-item v-for="(portlet, cIndex) in category.portletList" :key="cIndex">
        <div
          draggable="true"
          class="components-row"
          style="width:220px"
          @dragstart="handleDragCol($event, portlet)"
          @dragend="hanDragColEnd($event, portlet)"
        >
          <div>{{ portlet.name }}</div>
        </div>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import colStyle from '../mixins/methods/col-style'
import {
  mapPropAndSortAndDup
} from '../utils/ramdaUtil'
export default {
  name: 'default-framework',
  mixins: [colStyle],
  props: {
    componentData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: {
        heightOptions: [],
        colOptions: [],
        typeOptions: []
      }
    }
  },
  mounted() {
    const { options } = this
    options.heightOptions = mapPropAndSortAndDup('height', this.componentData)
  },
  methods: {
    handleDragCol(event, col) {
      this.$emit('drag-col-start', event, col)
    },
    hanDragColEnd(event, col) {
      this.$emit('drag-col-end', event, col)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
